<!-- <template>
  <div class="page-container" ref="pageContainerRef" @scroll="onScroll">
    <img :src="imageUrl" :style="{ transform: `scale(${imageScale})` }" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 图片URL
const imageUrl = './img/hua.jpg';

// 图片缩放比例
const imageScale = ref(1);

// 页面容器引用
const pageContainerRef = ref(null);

// 监听滚动事件
const onScroll = () => {
  if (!pageContainerRef.value) return;

  const scrollTop = pageContainerRef.value.scrollTop;
  const threshold = pageContainerRef.value.clientHeight * 0.5; // 在滚动超过容器高度的一半时开始放大

  if (scrollTop > threshold) {
    imageScale.value = Math.min(2, 1 + (scrollTop - threshold) / 100); // 控制放大速度和最大缩放比例
  } else {
    imageScale.value = 1;
  }
};

// 组件挂载后初始化
onMounted(() => {
  if (pageContainerRef.value) {
    pageContainerRef.value.scrollTop = 0; // 确保初始滚动位置为顶部
  }
});
</script>

<style scoped>
.page-container {
  overflow-y: auto;
  width: 100%;
  height: 200px; /* 根据需要设置容器的高度 */
}
</style> -->

<!-- <template>
  <div class="background-image-container">
    <img :src="imageUrl" :style="{ transform: `scale(${imageScale})` }" />
  </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted } from 'vue';

const imageUrl = './img/hua.jpg'; // 替换为你的图片URL

// 图片缩放比例
const imageScale = ref(1);

// 监听滚轮事件
const handleWheel = (event) => {
  if (event.deltaY > 0) {
    // 向下滚动时放大
    imageScale.value += 0.1;
  } else {
    // 向上滚动时缩小
    imageScale.value -= 0.1;
    imageScale.value = Math.max(imageScale.value, 1); // 最小缩放比例为1
  }
};

// 组件挂载后添加事件监听器
onMounted(() => {
  document.addEventListener('wheel', handleWheel);
});

// 组件卸载时移除事件监听器
onUnmounted(() => {
  document.removeEventListener('wheel', handleWheel);
});
</script>

<style scoped>
.background-image-container {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style> -->
<template>
  <div class="body">
    <div class="bg">
      <img src="/img/xing.webp" alt="" class="bg-image" />
      <div class="inner">
        <span style="margin-left: 10px" @click="onClickLeft"
          ><van-icon name="arrow-left"
        /></span>
        <span style="margin-left: 260px"
          ><van-icon name="search" /><van-icon
            name="ellipsis"
            style="margin-left: 20px"
        /></span>
      </div>
    </div>

    <div class="dll_myself_tou" v-for="item in userList" :key="item._id">
      <img
        :src="item.img"
        alt=""
        style="
          width: 75px;
          height: 75px;
          border-radius: 50%;
          margin-left: 20px;
          margin-top: -25px;
          border: 5px solid white;
        "
      />

      <div class="dll_my_sort">
        <div class="dll_my_sort_left">
          <div class="dll_number">182</div>
          关注
        </div>
        <div class="dll_my_sort_left">
          <div class="dll_number">120</div>
          粉丝
        </div>
        <div class="dll_my_sort_left">
          <div class="dll_number">920</div>
          被赞
        </div>
      </div>
      <div class="dll_span">
        <span style="font-size: 19px; margin-left: -200px">{{ item.name }}</span
        ><br />
        <span style="font-size: 13px; margin-left: -200px">{{
          item.desc
        }}</span>
      </div>
      <div class="dll_geren" @click="toedit">个人资料</div>
      <van-tabs v-model:active="activeName" color="#24c874">
        <van-tab title="动态" name="a">
          <p class="dll_myself_span">全部动态(2)</p>
          <br />
          <div class="dll_myself_card">
            <img
              style="border-radius: 5px"
              width="139"
              height="130"
              src="/img/hua.jpg"
            />
            <span class="sss" style="font-size: 13px; margin-top: 5px"
              >前几天因为天气的影响没怎么跑步，今天sdsfcsxzcrgvazed</span
            >
            <img
              :src="item.img"
              alt=""
              style="
                width: 25px;
                height: 25px;
                border-radius: 50%;
                margin-top: 10px;
                margin-left: 5px;
              "
            />
            <span
              style="
                font-size: 13px;
                margin-left: 5px;
                margin-top: -5px;
                position: absolute;
                top: 7.9rem;
              "
              >{{ item.name }}</span
            >
            <div style="font-size: 12px; margin-top: -26px; margin-left: 90px">
              <van-icon name="eye-o" />
              <span>1.2万</span>
            </div>
          </div>
          <div class="dll_myself_card">
            <img
              style="border-radius: 5px"
              width="139"
              height="130"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <span class="sss" style="font-size: 13px; margin-top: 5px"
              >前几天因为天气的影响没怎么跑步，今天sdsfcsxzcrgvazed</span
            >
            <img
              :src="item.img"
              alt=""
              style="
                width: 25px;
                height: 25px;
                border-radius: 50%;
                margin-top: 10px;
                margin-left: 5px;
              "
            />
            <span
              style="
                font-size: 13px;
                margin-left: 5px;
                margin-top: -10px;
                position: absolute;
                top: 8rem;
              "
              >{{ item.name }}</span
            >
            <div style="font-size: 12px; margin-top: -26px; margin-left: 90px">
              <van-icon name="eye-o" />
              <span>1.9万</span>
            </div>
          </div>
        </van-tab>
        <van-tab title="群聊" name="b">
          <p class="dll_myself_span">全部参与群聊(2)</p>
          <br />
          <van-cell-group style="margin-top: -30px">
            <van-cell
              center
              title="江城工程学院99群"
              value="20:30"
              label="ddd:下午没课的时候"
            />
          </van-cell-group>
          <van-cell-group>
            <van-cell
              center
              title="江城工程学院10群"
              value="一周前"
              label="Harry:下午没课的时候"
            />
          </van-cell-group>
        </van-tab>
        <van-tab title="一起跑" name="c">
          <p class="dll_myself_span">全部一起跑(1)</p>
          <br />
          <div class="dll_myself_teget">
            <img
              style="border-radius: 20px"
              width="310"
              height="160"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
            <div class="dll_zhaomu">
              <p>招募中</p>
            </div>
            <span class="ssss"
              >前几天因为天气的影响没怎么跑步，今天sdsfcsxzewfv色图怪不好滴法国netcrgvazed</span
            >
            <span
              style="
                color: #999;
                font-size: 13px;
                margin-left: 15px;
                margin-top: 15px;
                position: absolute;
                top: 8rem;
              "
              >{{ item.name }}</span
            >
            <div
              style="
                font-size: 12px;
                margin-top: 11px;
                margin-left: 60px;
                color: #999;
              "
            >
              <span>来自:江城工程学院</span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, provide } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
const router = useRouter();
const activeName = ref("a");
const onClickLeft = () => {
  router.go(-1);
};
const toedit = () => {
  router.push({
    path: "/dll_personal",
    query: { id: userList.value[0]._id },
  });
};

const userList = ref([]);
const getUser = async () => {
  const ids = localStorage.getItem("_id");
  console.log(ids);
  const { data } = await axios.get(
    "http://8.130.46.189:3000/dll/userlist?id=" + ids
  );
  userList.value = data;
};

onMounted(() => {
  getUser();
});
</script>

<style lang="scss" scoped>
.dll_zhaomu {
  border-radius: 0 20px 0 20px;
  width: 80px;
  position: absolute;
  font-size: 12px;
  top: 95px;
  color: white;
  background-color: #ec808d;
  letter-spacing: 2px;
  text-align: center;
  right: 35px;
}
.sss {
  padding-left: 4px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssss {
  padding-left: 14px;
  font-size: 13px;
  margin-top: 8px;
  display: -webkit-box;
  // text-align: center;
  font-weight: bold;
}

.dll_myself_card {
  width: 140px;
  height: 220px;
  margin-left: 30px;
  margin-top: -20px;
  float: left;
  border-radius: 5px;
  background-color: white;
}
.dll_myself_teget {
  width: 310px;
  height: 250px;
  margin-left: 30px;
  margin-top: -25px;
  float: left;
  border-radius: 5px;
  background-color: white;
}
.body {
  width: 100%;
  height: 665px;
  background-color: #f7f7f7;
}

.bg {
  position: fixed;
  width: 450px;
  height: 253px;
  overflow: hidden;

  .bg-image {
    width: 100%;
    height: 150px;
    transform: scale(1.2);
    filter: blur(5px);
  }

  .bg-image::after {
    content: "";
    display: block;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  .inner {
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
    color: white;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 435px;
    padding: 10px 0;

    .dll_my_wo_right {
      margin-right: 10px;
    }
  }
}

.dll_myself_tou {
  width: 100%;
  height: 220px;
  background-color: #ffffff;
  position: relative;
  // background-color: red;
  z-index: 100;
  top: 140px;
  border-radius: 20px 20px 0 0;

  .dll_span {
    margin-top: -40px;
  }
}

.dll_my_sort {
  width: 230px;
  height: 60px;
  font-size: 12px;
  position: relative;
  // background-color: yellow;
  z-index: 1000;
  top: -60px;
  left: 115px;

  .dll_my_sort_left {
    width: 75px;
    height: 75px;
    line-height: 25px;
    float: left;
    // margin-left: px;
    text-align: center;
    margin-top: 10px;

    .dll_number {
      font-size: 20px;
    }
  }
}

.dll_geren {
  width: 80px;
  position: relative;
  left: 270px;
  top: -30px;
  font-size: 17px;
  text-align: center;
  border-radius: 10px;
  line-height: 20px;
  padding: 3px;
  color: #24c874;
  border: 1px solid #24c874;
}

.dll_myself_span {
  font-size: 14px;
  color: #999999;
  padding-left: 18px;
}
</style>
